<template>
  <zm-panel
    title="产品激活"
    :visible.sync="value"
    :required-tag="obj.isActive === '0'"
    @change="close"
    class="panelContainer"
  >
    <app-block>
      <component
        :ref="tabType"
        :is="tabType"
        :obj="obj"
        @getDefaultData="getDefaultData"
        @getWholeData="getWholeData"
      ></component>
    </app-block>
    <app-block v-if="obj.isActive === '0' && obj.isClose==='0' && !['4', '6', '7'].includes(obj.orderTypeId)">
      <h3 class="dib">产品激活配置</h3>
      <el-form
        :model="form"
        ref="form"
        :rules="Rules"
        label-width="140px"
        label-position="right"
      >
        <zm-form-item label="有效期类型：" prop="expiredType">
          <zm-data-radio
            v-model="form.expiredType"
            :list="validityType"
            label-name="name"
            @change="expiredTypeChange"
          ></zm-data-radio>
        </zm-form-item>
        <zm-form-item
          prop="endDate"
          label="有效期配置："
          v-if="form.expiredType === '1'"
        >
          <zm-date-picker
            :target="form"
            start-key="startDate"
            end-key="endDate"
          />
        </zm-form-item>

        <zm-form-item prop="floatDay" label="" v-if="form.expiredType !== '1'">
          {{ form.expiredType === "2" ? "成功绑定后" : "销售成功后" }}
          <zm-input
            type="text"
            v-model="form.floatDay"
            @keyup.native="floatDayNumber"
            class="w150 plr10"
          >
          </zm-input>
          <el-select v-model="form.floatUnit" placeholder="请选择" class="w60">
            <el-option
              v-for="item in floatUnitOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>有效</span>
        </zm-form-item>
        <!-- saleType 销售方式id，1纸质，2电子 -->
        <!-- 类型：1兑换券，2卖品券，3点卡，4次卡，5优惠券 -->
        <zm-form-item
          :label="codeIdDetailName + '：'"
          prop="codeIdDetail"
          v-if="obj.saleType === '1'"
        >
          <div v-for="(item, index) in form.codeIdDetail" :key="index">
            <zm-input
              v-model="item.left"
              :placeholder="'请输入' + codeIdDetailName"
              class="w200 mb10"
            />
            <span class="plr5">至</span>
            <zm-input
              v-model="item.right"
              :placeholder="'请输入' + codeIdDetailName"
              class="w200 mb10"
            />
            <zm-button
              @click="addCodeIdDetail"
              t="add"
              v-if="index === 0"
            >
             <!-- && form.codeIdDetail.length < 21 -->
              新增
            </zm-button>
            <zm-button
              @click="delCodeIdDetail(index)"
              t="del"
              v-if="index !== 0"
            >
              删除
            </zm-button>
          </div>
        </zm-form-item>
      </el-form>
    </app-block>
    <div slot="footer" class="tr">
      <el-button type="default" @click="close">关闭</el-button>
      <el-button type="primary" @click="onSubmit" v-if="obj.isActive === '0' && obj.isClose === '0'">
        激活产品
      </el-button>
    </div>
    <active-dialog
      v-if="activeParams.visible"
      v-model="activeParams.visible"
      :obj="activeParams.obj"
      @after="activeAfter"
    ></active-dialog>
  </zm-panel>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import { checkStatus, validityTime, floatUnitOptions } from '../../const'
import dataInfo from './dataInfo'
import { active } from '@/api/src/saleOrder'
import ActiveDialog from './activeDialog'

export default {
  components: { dataInfo, ActiveDialog },
  mixins: [panelMixin],
  data () {
    const codeIdDetailCheck = (rule, value, callback) => {
      const res = this.form.codeIdDetail.find(item => {
        return !item.left || !item.right
      })
      if (res) {
        callback(new Error(`请填写完整${this.codeIdDetailName}`))
      }
      callback()
    }
    return {
      checkStatus,
      tabType: 'dataInfo',
      validityTime,
      floatUnitOptions,
      form: {
        expiredType: '1',
        saleType: '', // 销售方式id，1纸质，2电子
        codeIdDetail: [{ left: '', right: '' }],
        startDate: '',
        endDate: '',
        floatDay: '',
        floatUnit: 'day'
      },
      activeParams: {
        visible: false,
        obj: {}
      },
      wholeForm: {},
      Rules: {
        endDate: {
          required: true,
          message: '请选择有效期',
          trigger: 'change'
        },
        codeIdDetail: {
          validator: codeIdDetailCheck
        },
        floatDay: {
          required: true,
          message: '请输入天数',
          trigger: 'blur'
        }
      }
    }
  },
  computed: {
    codeIdDetailName () {
      // 类型：1兑换券，2卖品券，3点卡，4次卡，5优惠券
      let productType = ''
      if (
        this.obj.productTypeId === '1' ||
        this.obj.productTypeId === '2' ||
        this.obj.productTypeId === '5'
      ) {
        productType = '券号区间'
      } else if (
        this.obj.productTypeId === '3' ||
        this.obj.productTypeId === '4'
      ) {
        productType = '卡号区间'
      } else {
        productType = '券号区间'
      }
      return productType
    },
    validityType () {
      if (this.obj.productTypeId === '3') {
        return this.validityTime.filter(item => {
          return item.value !== '3'
        })
      } else {
        return this.validityTime
      }
    }
  },
  created () {},
  methods: {
    floatDayNumber () {
      this.form.floatDay = this.form.floatDay.replace(/\D+/, '')
      this.form.floatDay = this.form.floatDay.replace('.', '')
    },
    getDefaultData (val) {
      // this.$refs[this.form.tabType].getInfo()
      this.form = val
      console.log(this.form, 'form')
      this.$set(
        this.form,
        'codeIdDetail',
        this.form.codeIdDetail || [{ left: '', right: '' }]
      )
    },
    getWholeData (val) {
      this.wholeForm = val
    },
    addCodeIdDetail () {
      this.form.codeIdDetail.push({ left: '', right: '' })
    },
    delCodeIdDetail (index) {
      this.form.codeIdDetail.splice(index, 1)
    },
    expiredTypeChange () {
      this.form.codeIdDetail = [{ left: '', right: '' }]
      this.form.startDate = ''
      this.form.endDate = ''
      this.form.floatDay = ''
      this.form.floatUnit = 'day'
    },
    async onSubmit () {
      /* let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return */
      const form = {
        ...this.form,
        ...this.wholeForm,
        ...{ id: this.obj.id },
        ...{ saleType: this.obj.saleType }
      }
      if (['4', '6', '7'].includes(this.obj.orderTypeId)) {
        await active({id: this.obj.id})
        this.activeAfter()
      } else {
        this.activeParams = {
          visible: true,
          obj: form
        }
      }

      // await active(form)
      // this.$message.success('激活成功')
      // this.$emit('after')
      // this.close()
    },
    activeAfter () {
      this.$message.success('激活成功')
      this.$emit('after')
      this.close()
    }
  }
}
</script>

<style scoped lang="stylus"></style>
